<template>
	<div class="sidekick-info">
		<el-icon size="32" @click="handleBack()">
			<ArrowLeft style="cursor: pointer" />
		</el-icon>

		<div class="flex-b-c" style="margin-top: 30px">
			<img style="display: block; width: 80px; height: 80px; border-radius: 50%" src="/images/9.jpg" alt="" />
			<div class="avatar flex-b-c" style="margin-top: 50px">
				<div class="flex-s-c">
					<img style="width: 50px; height: 50px; border-radius: 50%" :src="data.image" alt="" />
					<div style="margin-left: 10px">
						<p style="font-size: 16px">{{ data.name }}</p>
						<p style="font-size: 14px; color: #999999">15m</p>
					</div>
				</div>
				<div class="item-right" style="margin-left: 40px">
					<p>
						Order Volume:
						<span :style="{ color: 'red' }"> 0.021 </span>
						<img style="width: 20px; height: 20px" src="/images/icon/down.svg" alt="Decrease" />
						Order Count:
						<span :style="{ color: 'black' }"> 10 </span>
						<img style="width: 20px; height: 20px" src="/images/icon/up.svg" alt="Increase" />
						Current Value:
						<span :style="{ color: 'black' }"> 0.105 </span>
						<img style="width: 20px; height: 20px" src="/images/icon/up.svg" alt="Increase" />
					</p>
				</div>
			</div>
		</div>

		<p class="name" style="padding-top: 20px; font-weight: bold; font-size: 18px">Dr Burns</p>
		<p style="font-size: 14px; padding-top: 10px">Last seen 2d ago · You own 2 keys</p>

		<div class="flex-s-c">
			<div class="avatar">
				<div class="flex-s-c" style="margin-top: 10px">
					<div style="padding: 6px 16px; border-radius: 6px; background: #e7e7e7; margin-right: 10px">#145,122</div>
					<img @click="handleOpen" style="width: auto; height: 30px; margin-right: 10px" src="/images/twitter.png" alt="" />
					<div style="padding: 6px 16px; border-radius: 6px; background: #e7e7e7; margin-right: 10px">#1,122</div>
					<img @click="handleOpen" style="width: 30px; height: 30px; cursor: pointer" src="/favicon.ico" alt="" />
				</div>
			</div>
		</div>

		<div class="flex-s-c" style="margin-top: 20px; color: #999999">
			<div style="text-align: center">
				<p>8</p>
				<p>holders</p>
			</div>
			<div style="text-align: center; margin: 0 20px">
				<p>8</p>
				<p>holding</p>
			</div>
			<div style="text-align: center">
				<p>9</p>
				<p>watchlists</p>
			</div>
		</div>

		<div class="table flex-b-c">
			<div class="table-left flex-s-c">
				<p :class="active === 1 ? 'active' : ''" @click="handleChange(1)">Keys</p>
				<p :class="active === 2 ? 'active' : ''" @click="handleChange(2)">Trades</p>
				<p :class="active === 3 ? 'active' : ''" @click="handleChange(3)">Holders</p>
				<p :class="active === 4 ? 'active' : ''" @click="handleChange(4)">Holding</p>
			</div>
			<el-icon size="24" color="#999999">
				<Refresh />
			</el-icon>
		</div>

		<div class="table-content" v-if="active === 1">
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/7.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 8 Oxy Keys</p>
					<p><span>0.248ETH</span>, 11h ago</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/3.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 7 Oxy Keys</p>
					<p><span>0.248ETH</span>, 20h ago</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/5.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 33 Oxy Keys</p>
					<p><span>0.248ETH</span>, 1day ago</p>
				</div>
			</div>
		</div>
		<div class="table-content" v-if="active === 4">
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/4.jpg" alt="" />
					<p style="margin-left: 10px">Jacksonwun</p>
				</div>
				<div class="item-right">
					<p>0.002ETH</p>
					<p>$3.62</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/2.jpg" alt="" />
					<p style="margin-left: 10px">Asaaa</p>
				</div>
				<div class="item-right">
					<p>13.5ETH</p>
					<p>$959.62</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/3.jpg" alt="" />
					<p style="margin-left: 10px">Json</p>
				</div>
				<div class="item-right">
					<p>0.012ETH</p>
					<p>$18.92</p>
				</div>
			</div>
		</div>
		<div class="table-content" v-if="active != 1 && active != 4">Buy friends' keys to see them here</div>
	</div>
</template>

<script setup>
import { ArrowLeft, Refresh } from "@element-plus/icons";
import router from "@/router";
import { ref } from "vue";

const data = ref(JSON.parse(localStorage.getItem("sidekickData")));

const handleBack = () => {
	router.back();
};
const active = ref(1);
const handleChange = (index) => {
	active.value = index;
};
</script>

<style scoped lang="scss">
.sidekick-info {
	.avatar {
		position: relative;

		img {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background: #efefef;
		}

		.money {
			position: absolute;
			width: 110px;
			height: 40px;
			border-radius: 20px;
			background: #00b9f4;
			text-align: center;
			line-height: 40px;
			color: #ffffff;
			top: 110px;
			left: 50%;
			transform: translateX(-50%);
		}

		.name {
			margin-top: 40px;
			text-align: center;
			font-size: 18px;
		}
	}

	.table {
		margin-top: 50px;
		color: #666666;

		p {
			margin-right: 20px;
			cursor: pointer;
		}

		.active {
			color: #333333;
			font-weight: bold;
		}
	}

	.table-content {
		margin-top: 30px;

		.item {
			margin-bottom: 20px;
		}

		.avatar {
			margin-right: 16px;

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background: #efefef;
			}

			img:last-child {
				position: relative;
				left: -10px;
			}
		}

		.item-right {
			p:last-child {
				font-size: 14px;
				padding-top: 10px;
				color: #999999;

				span {
					color: #ddc0cf;
				}
			}
		}
	}
}
</style>
